<template>
  <div class="recommend-container">
    <ul class="recommend">
      <!--<li class="recommend-item" v-for="(item,index) in recommendlist" :key="index">
        <img :src="item.thumb_url" alt="" width="100%">
        <h4 class="item-title">{{item.short_name}}</h4>
        <div class="item-bottom">
          <span class="item-price">￥{{item.price/100}}</span>
          <span class="item-sales">{{item.sales_tip}}</span>
          <button class="item-btn">找相关</button>
        </div>
      </li>-->
      <shop-list tag="li" :item=item v-for="(item,index) in recommendlist" :key="index" :clickCellBtn="handleBtnClick"></shop-list>
    </ul>
  </div>
</template>

<script>
    // 导入mapState，这样就可以通过计算属性从vuex中拿到数据
    import {mapState} from 'vuex'
    import ShopList from '../../components/ShopList/ShopList.vue'
    import BScroll from 'better-scroll'
    import {addShopCart} from '../../api/index'
    // 这种方式是按需加载，但是没有安装和配置按需加载的组件,所以就引起了出不来的错误
    import { Indicator, Toast } from 'mint-ui'

    export default {
        name: 'Recommend',
        components: {
          ShopList
        },
        data(){
          return {
            currentPage: 1,
            pageSize: 8
          }
        },
        computed: {
          ...mapState(['recommendlist']),
          ...mapState(['userInfo'])
        },
        mounted(){
          // 加载动画
          Indicator.open('正在加载数据...');
          // 经过vuex发起请求
          this.$store.dispatch('reqRecommendList',{pageNum:this.currentPage,pageSize:this.pageSize,callback:()=>{
            Indicator.close();
          }});
        },
        methods:{
          _initBscroll(){
            // 初始化
            this.listScroll = new BScroll('.recommend-container',{
              scrollY: true,
              probeType: 3
            });

            // 监听列表滚动
            this.listScroll.on('touchEnd',(pos)=>{
              // 监听下拉(刷新)
              if(pos.y>50){
                console.log('下拉刷新');
              }
              // 监听上拉(加载更多)
              if(this.listScroll.maxScrollY > pos.y + 20){
                Indicator.open('正在加载数据...');
                this.$store.dispatch('reqRecommendList',{pageNum:this.currentPage,pageSize:this.pageSize,callback:()=>{
                  Indicator.close();
                }});
              }
            });

            // 监听列表滚动结束
            this.listScroll.on('scrollEnd',()=>{
              this.listScroll.refresh();
            })
          },
          async handleBtnClick(item){ // 这里可以通过actions，也可以不通过(因为不需要对states中的数据进行操作)
            let result = await addShopCart(this.$store.state.userInfo.id,item.goods_id,item.goods_name,item.thumb_url,item.price);
            if(result.success_code === 200){
              Toast({
                message: result.messages,
                position: 'center',
                duration: 500
              });
            }else {
              Toast(result.messages);
            }
          }
        },
        watch:{
          recommendlist(){
            this.$nextTick(()=>{
              this.currentPage+=1;
              this._initBscroll();
            })
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
// 一些样式的细节不再考虑，真实开发中UI会提供八爪图，然后我们可以按照图中所示进行样式设定
  .recommend-container
    width 100%
    height 100%
    background-color #f5f5f5
    overflow hidden
    .recommend
      display flex
      flex-direction row
      flex-wrap wrap
      background-color #f5f5f5
      padding-bottom 50px
      // .recommend-item:nth-child(2n-1)
      //   margin-right 1%
      // .recommend-item
      //   width 49.5%
      //   background-color #fff
      //   margin-bottom 10px
      //   padding-bottom 10px
      //   .item-title
      //     line-height 20px
      //     font-size 13px
      //     font-weight 200
      //     height 20px
      //     overflow hidden
      //     margin 5px 0
      //     padding 0 5px
      //   .item-bottom
      //     display flex
      //     flex-direction row
      //     align-items center
      //     padding 0 6px
      //     .item-price
      //       flex 2
      //       color red
      //       font-weight 700
      //       font-size 12px
      //     .item-sales
      //       flex 4
      //       font-size 10px
      //       color #666
      //     .item-btn
      //       flex 2
      //       border 1px solid orangered
      //       height 26px
      //       border-radius 5px
      //       background-color transparent
      //       color red
      //       font-size 10px

</style>
